<style lang="less">
@media print {
  ._wz_hiddenDetails {
    -webkit-print-color-adjust: exact;
    height: inherit !important;
    font-size: 12px !important;
    //@page {
    //  size: landscape;
    //}
  }
}
</style>
<template>
  <div class="_wz_cent_main _wz_hiddenDetails"  ref="hiddenDetails">
    <Card dis-hover :bordered="true">
      <div>
        <table cellpadding="0" cellspacing="0" border="0">
          <colgroup>
            <col width="12%">
            <col width="21%">
            <col width="12%">
            <col width="21%">
            <col width="12%">
            <col width="21%">
          </colgroup>
          <tbody>
          <tr>
            <td style="font-weight: 600;position:relative;" colspan="6">
              基本信息
              <Button type="primary" @click="printTest" class="no-print" style="position: absolute;right: 10px;top: 8px;">
                打印
              </Button>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;">隐患排查</td>
            <td>{{!!formData.riskInspectItemName ? formData.riskInspectItemName : '--'}}</td>
            <td style="text-align: center;">完成状态</td>
            <td>
              <Tag color="error" type="dot" v-if="formData.riskInspectItemFinish == 0">未完成</Tag>
              <Tag color="primary" type="dot" v-if="formData.riskInspectItemFinish == 1">已完成</Tag>
            </td>
            <td style="text-align: center;">上报方式</td>
            <td>
              <Tag color="success" type="dot" v-if="formData.riskInspectItemType == 1">清单上报</Tag>
              <Tag color="primary" type="dot" v-if="formData.riskInspectItemType == 2">自主上报</Tag>
            </td>
          </tr>
          <template v-if="formData.riskInspectItemType == 1">
            <tr>
              <td style="text-align: center;">隐患部位</td>
              <td>{{!!formData.riskPositionName ? formData.riskPositionName : '--'}}</td>
              <td style="text-align: center;">隐患类型</td>
              <td>
                <Tag color="success" type="dot" v-if="formData.riskPositionType == 1">基础管理</Tag>
                <Tag color="primary" type="dot" v-if="formData.riskPositionType == 2">设备设施</Tag>
                <Tag color="warning" type="dot" v-if="formData.riskPositionType == 3">作业活动</Tag>
              </td>
              <td style="text-align: center;">隐患项目</td>
              <td>{{!!formData.riskPositionItemName ? formData.riskPositionItemName : '--'}}</td>
            </tr>
          </template>
          <tr>
            <td style="text-align: center;">运输企业</td>
            <td colspan="5">{{!!formData.deptName ? formData.deptName : '--'}}</td>
          </tr>
          <template v-if="formData.riskInspectItemType == 1">
            <tr>
              <td style="text-align: center;">检查标准</td>
              <td colspan="5">{{!!formData.riskPositionItemCriterion ? formData.riskPositionItemCriterion : '--'}}</td>
            </tr>
            <tr>
              <td style="text-align: center;">失控表现</td>
              <td colspan="5">{{!!formData.riskPositionItemPerformance ? formData.riskPositionItemPerformance : '--'}}</td>
            </tr>
            <tr>
              <td style="text-align: center;">管控措施</td>
              <td colspan="5">{{!!formData.riskPositionItemMeasures ? formData.riskPositionItemMeasures : '--'}}</td>
            </tr>
            <tr>
              <td style="text-align: center;">个人防护</td>
              <td colspan="5">{{!!formData.riskPositionItemProtect ? formData.riskPositionItemProtect : '--'}}</td>
            </tr>
            <tr>
              <td style="text-align: center;">应急措施</td>
              <td colspan="5">{{!!formData.riskPositionItemBurst ? formData.riskPositionItemBurst : '--'}}</td>
            </tr>
          </template>
          <!--上报-->
          <template v-if="formData.riskInspectItemProcess > 0">

            <tr>
              <td style="font-weight: 600;position:relative;" colspan="6">隐患排查</td>
            </tr>
            <tr>
              <td style="text-align: center;">排查状态</td>
              <td>
                <Tag color="primary" v-if="formData.riskInspectItemState == 1">已排查</Tag>
                <Tag color="error" v-else>未排查</Tag>
              </td>
              <td style="text-align: center;">隐患等级</td>
              <td>
                <Tag color="warning" v-if="formData.riskInspectItemLv == 1">一般隐患</Tag>
                <Tag color="error" v-else-if="formData.riskInspectItemLv == 2">重大隐患</Tag>
                <Tag color="primary" v-else>无隐患</Tag>
              </td>
              <td style="text-align: center;">排查时间</td>
              <td>{{!!formData.riskInspectItemTime ? formData.riskInspectItemTime : '--'}}</td>
            </tr>
            <tr>
              <td style="text-align: center;">排查人员</td>
              <td>{{!!formData.riskInspectItemUserName ? formData.riskInspectItemUserName : '--'}}</td>
              <td style="text-align: center;">排查部门</td>
              <td colspan="3">{{!!formData.riskInspectItemInOrgName ? formData.riskInspectItemInOrgName : '--'}}</td>
            </tr>
            <tr>
              <td style="text-align: center;">排查描述</td>
              <td colspan="5">{{!!formData.riskInspectItemContext ? formData.riskInspectItemContext : '--'}}</td>
            </tr>
            <tr>
              <td style="text-align: center;">隐患图片</td>
              <td colspan="3" style="padding: 10px;">
                <template v-if="!!formData.riskInspectItemImg">
                  <div style="width: 130px;overflow: hidden;display: inline-block;margin-right: 4px;" v-for="item,index in JSON.parse(formData.riskInspectItemImg)">
                    <div class="_wz_insertimage" style="display: block;width: 100%;height: 130px;">
                      <viewer style="width: 100%;height: 100%;">
                        <img :src="apiUrl.imgUrl+item" @error="public.imgDispose" />
                      </viewer>
                    </div>
                  </div>
                </template>
              </td>
              <td style="text-align: center;">签字照片</td>
              <td>
                <div style="width: 80%;overflow: hidden;display:block;padding: 10px;margin: auto;" v-if="!!formData.riskInspectItemSign">
                  <div class="_wz_insertimage" style="display: block;width: 100%;">
                    <viewer style="width: 100%;height: 100%;">
                      <img :src="apiUrl.imgUrl + formData.riskInspectItemSign" @error="public.imgDispose" />
                    </viewer>
                  </div>
                </div>
              </td>
            </tr>
          </template>

          <!--核查  && formData.riskInspectItemCheckState != -1-->
          <template v-if="formData.riskInspectItemProcess >= 1 && formData.riskInspectItemLv != 0">
            <tr>
              <td style="font-weight: 600;position:relative;" colspan="6">隐患核查</td>
            </tr>
            <tr>
              <td style="text-align: center;">核查状态</td>
              <td>
                <Tag color="primary" v-if="formData.riskInspectItemCheckState == 1">已核查</Tag>
                <Tag color="warning" v-else-if="formData.riskInspectItemCheckState == -1">已退回</Tag>
                <Tag color="error" v-else>未核查</Tag>
              </td>
              <td style="text-align: center;">核查结果</td>
              <td>
                <Tag color="primary" v-if="formData.riskInspectItemCheckLv == 0">无隐患</Tag>
                <Tag color="warning" v-else-if="formData.riskInspectItemCheckLv == 1">一般隐患</Tag>
                <Tag color="error" v-else-if="formData.riskInspectItemCheckLv == 2">重大隐患</Tag>
              </td>
              <td style="text-align: center;">核查时间</td>
              <td>{{!!formData.riskInspectItemCheckTime ? formData.riskInspectItemCheckTime : '--'}}</td>
            </tr>
            <tr>
              <td style="text-align: center;">整改方式</td>
              <td>
                <Tag color="primary" v-if="formData.riskInspectItemHandleType == 1">立即整改</Tag>
                <Tag color="warning" v-else-if="formData.riskInspectItemHandleType == 2">限期整改</Tag>
                <Tag color="error" v-else-if="formData.riskInspectItemHandleType == 3">停业整改</Tag>
              </td>
              <td style="text-align: center;">限期整改</td>
              <td colspan="3">{{!!formData.riskInspectItemHandleDate ? formData.riskInspectItemHandleDate : '--'}}</td>
            </tr>
            <tr>
              <td style="text-align: center;">核查人员</td>
              <td>{{!!formData.riskInspectItemCheckUserName ? formData.riskInspectItemCheckUserName : '--'}}</td>
              <td style="text-align: center;">核查部门</td>
              <td colspan="3">{{!!formData.riskInspectItemCheckInOrgName ? formData.riskInspectItemCheckInOrgName : '--'}}</td>
            </tr>
            <tr>
              <td style="text-align: center;">核查描述</td>
              <td colspan="5">{{!!formData.riskInspectItemCheckContext ? formData.riskInspectItemCheckContext : '--'}}</td>
            </tr>
            <tr>
              <td style="text-align: center;">整改措施</td>
              <td colspan="5">{{!!formData.riskInspectItemCheckMeasures ? formData.riskInspectItemCheckMeasures : '--'}}</td>
            </tr>
            <tr>
              <td style="text-align: center;">核查意见</td>
              <td colspan="5">{{!!formData.riskInspectItemCheckOpinion ? formData.riskInspectItemCheckOpinion : '--'}}</td>
            </tr>
            <tr>
              <td style="text-align: center;">核查图片</td>
              <td colspan="3" style="padding: 10px;">
                <template v-if="!!formData.riskInspectItemCheckImg">
                  <div style="width: 130px;overflow: hidden;display: inline-block;margin-right: 4px;" v-for="item,index in JSON.parse(formData.riskInspectItemCheckImg)">
                    <div class="_wz_insertimage" style="display: block;width: 100%;height: 130px;">
                      <viewer style="width: 100%;height: 100%;">
                        <img :src="apiUrl.imgUrl+item" @error="public.imgDispose" />
                      </viewer>
                    </div>
                  </div>
                </template>
              </td>
              <td style="text-align: center;">签字照片</td>
              <td>
                <div style="width: 80%;overflow: hidden;display:block;padding: 10px;margin: auto;" v-if="!!formData.riskInspectItemCheckSign">
                  <div class="_wz_insertimage" style="display: block;width: 100%;">
                    <viewer style="width: 100%;height: 100%;">
                      <img :src="apiUrl.imgUrl + formData.riskInspectItemCheckSign" @error="public.imgDispose" />
                    </viewer>
                  </div>
                </div>
              </td>
            </tr>
          </template>

          <!--整改  && formData.riskInspectItemHandleState != -1-->
          <template v-if="formData.riskInspectItemProcess >= 2 && formData.riskInspectItemCheckState != -1 && formData.riskInspectItemCheckLv != 0">
            <tr>
              <td style="font-weight: 600;position:relative;" colspan="6">隐患整改</td>
            </tr>
            <tr>
              <td style="text-align: center;">整改状态</td>
              <td>
                <Tag color="primary" v-if="formData.riskInspectItemHandleState == 1">已整改</Tag>
                <Tag color="warning" v-else-if="formData.riskInspectItemHandleState == -1">已退回</Tag>
                <Tag color="error" v-else>未整改</Tag>
              </td>
              <td style="text-align: center;">整改资金</td>
              <td>{{!!formData.riskInspectItemHandlePrice ? formData.riskInspectItemHandlePrice : '--'}}</td>
              <td style="text-align: center;">整改时间</td>
              <td>{{!!formData.riskInspectItemHandleTime ? formData.riskInspectItemHandleTime : '--'}}</td>
            </tr>
            <tr>
              <td style="text-align: center;">整改人员</td>
              <td>{{!!formData.riskInspectItemHandleUserName ? formData.riskInspectItemHandleUserName : '--'}}</td>
              <td style="text-align: center;">整改部门</td>
              <td colspan="3">{{!!formData.riskInspectItemHandleInOrgName ? formData.riskInspectItemHandleInOrgName : '--'}}</td>
            </tr>
            <tr>
              <td style="text-align: center;">整改描述</td>
              <td colspan="5">{{!!formData.riskInspectItemHandleContext ? formData.riskInspectItemHandleContext : '--'}}</td>
            </tr>
            <tr>
              <td style="text-align: center;">整改措施</td>
              <td colspan="5">{{!!formData.riskInspectItemHandleMeasures ? formData.riskInspectItemHandleMeasures : '--'}}</td>
            </tr>
            <tr>
              <td style="text-align: center;">整改情况</td>
              <td colspan="5">{{!!formData.riskInspectItemHandleSituation ? formData.riskInspectItemHandleSituation : '--'}}</td>
            </tr>
            <tr>
              <td style="text-align: center;">整改图片</td>
              <td colspan="3" style="padding: 10px;">
                <template v-if="!!formData.riskInspectItemHandleImg">
                  <div style="width: 130px;overflow: hidden;display: inline-block;margin-right: 4px;" v-for="item,index in JSON.parse(formData.riskInspectItemHandleImg)">
                    <div class="_wz_insertimage" style="display: block;width:100%;height: 130px;">
                      <viewer style="width: 100%;height: 100%;">
                        <img :src="apiUrl.imgUrl+item" @error="public.imgDispose" />
                      </viewer>
                    </div>
                  </div>
                </template>
              </td>
              <td style="text-align: center;">签字照片</td>
              <td>
                <div style="width: 80%;overflow: hidden;display:block;padding: 10px;margin: auto;" v-if="!!formData.riskInspectItemHandleSign">
                  <div class="_wz_insertimage" style="display: block;width: 100%;">
                    <viewer style="width: 100%;height: 100%;">
                      <img :src="apiUrl.imgUrl + formData.riskInspectItemHandleSign" @error="public.imgDispose" />
                    </viewer>
                  </div>
                </div>
              </td>
            </tr>
          </template>

          <!--验收  && formData.riskInspectItemReviewState != -1-->
          <template v-if="formData.riskInspectItemProcess >= 3 && formData.riskInspectItemHandleState != -1">
            <tr>
              <td style="font-weight: 600;position:relative;" colspan="6">隐患验收</td>
            </tr>
            <tr>
              <td style="text-align: center;">验收状态</td>
              <td>
                <Tag color="primary" v-if="formData.riskInspectItemReviewState == 1">已验收</Tag>
                <Tag color="warning" v-else-if="formData.riskInspectItemReviewState == -1">已退回</Tag>
                <Tag color="error" v-else>未验收</Tag>
              </td>
              <td style="text-align: center;">验收结果</td>
              <td>
                <Tag color="primary" v-if="formData.riskInspectItemReviewResult == 1">通过</Tag>
                <Tag color="error" v-else-if="formData.riskInspectItemReviewResult == 0">不通过</Tag>
              </td>
              <td style="text-align: center;">验收时间</td>
              <td>{{!!formData.riskInspectItemReviewTime ? formData.riskInspectItemReviewTime : '--'}}</td>
            </tr>
            <tr>
              <td style="text-align: center;">验收人</td>
              <td>{{!!formData.riskInspectItemReviewUserName ? formData.riskInspectItemReviewUserName : '--'}}</td>
              <td style="text-align: center;">验收部门</td>
              <td colspan="3">{{!!formData.riskInspectItemReviewInOrgName ? formData.riskInspectItemReviewInOrgName : '--'}}</td>
            </tr>
            <tr>
              <td style="text-align: center;">验收描述</td>
              <td colspan="5">{{!!formData.riskInspectItemReviewContext ? formData.riskInspectItemReviewContext : '--'}}</td>
            </tr>
            <tr>
              <td style="text-align: center;">验收意见</td>
              <td colspan="5">{{!!formData.riskInspectItemReviewOpinion ? formData.riskInspectItemReviewOpinion : '--'}}</td>
            </tr>
            <tr>
              <td style="text-align: center;">验收图片</td>
              <td colspan="3" style="padding: 10px;">
                <template v-if="!!formData.riskInspectItemReviewImg">
                  <div style="width: 130px;overflow: hidden;display: inline-block;margin-right: 4px;" v-for="item,index in JSON.parse(formData.riskInspectItemReviewImg)">
                    <div class="_wz_insertimage" style="display: block;width: 100%;height: 130px;">
                      <viewer style="width: 100%;height: 100%;">
                        <img :src="apiUrl.imgUrl+item" @error="public.imgDispose" />
                      </viewer>
                    </div>
                  </div>
                </template>
              </td>
              <td style="text-align: center;">签字照片</td>
              <td>
                <div style="width: 80%;overflow: hidden;display:block;padding: 10px;margin: auto;" v-if="!!formData.riskInspectItemReviewSign">
                  <div class="_wz_insertimage" style="display: block;width: 100%;">
                    <viewer style="width: 100%;height: 100%;">
                      <img :src="apiUrl.imgUrl + formData.riskInspectItemReviewSign" @error="public.imgDispose" />
                    </viewer>
                  </div>
                </div>
              </td>
            </tr>
          </template>
          </tbody>
        </table>
      </div>
    </Card>


    <!--图片查看-->
    <Modal title="图片查看" v-model="visible">
      <img :src="imgSrc" v-if="visible" style="width: 100%" @error="public.imgDispose" />
    </Modal>


    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>
<script>
export default {
  props: ['selectData'],//接收来自父组件的数据
  data() {
    return {
      formData:{},
      spinShow:false,
      //缩略图
      visible: false,
      imgSrc: "",
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var that = this;
    that.formData = that.selectData;

  },
  methods: {//执行的方法

    //缩略图查看
    handleView(src) {
      this.imgSrc = src;
      this.visible = true;
    },
    //下载文件
    downloadFile(data){
      window.open(this.apiUrl.imgUrl + '/' +data)
    },
    printTest() {
      this.$print(this.$refs.hiddenDetails) // 使用
    },
  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_hiddenDetails{
  table {
    border-top: 1px solid #515a6e;
    border-left: 1px solid #515a6e;
    width: 100%;

    td {
      min-width: 0;
      height: 40px;
      box-sizing: border-box;
      text-align: left;
      text-overflow: ellipsis;
      border-right: 1px solid #515a6e;
      border-bottom: 1px solid #515a6e;
      padding-left: 18px;
      padding-right: 18px;
    }
  }
}
</style>
